<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html >
<html>
<head>
<%@ include file="../common/required.jspf"%>
<title>网上书城-订单详情</title>
<link rel="stylesheet" type="text/css"
	href="${ctx}/statics/common/vendor/normalize.min.css" />
<!-- 可选 -->
<link rel="stylesheet"
	href="${ctx}/statics/common/vendor/font-awesome/css/font-awesome.min.css" />
<!-- 可选 -->
<link rel="stylesheet"
	href="${ctx}/statics/common/vendor/swiper/swiper.min.css" />
<link rel="stylesheet" href="${ctx}/statics/store/css/common.css" />
<link rel="stylesheet" href="${ctx}/statics/store/css/shopcar.css" />
<!-- 苹果设备在桌面上生成的快捷图标 -->
<link rel="apple-touch-icon"
	href="${ctx}/statics/store/img/apple-touch-icon.png">
<link rel="icon" href="${ctx}/favicon.ico">


<style type="text/css">
.container-item .item-top .item-top-inner{
	height:.33rem;
	width: 33%;
	border-right: .01rem solid #999999;
	float: :left;
	text-align: center;
	color: #999999;
	font-size: .16rem;
	line-height: .33rem;
}
.product-title{
	height:.33rem;
	width: 33%;
	border-right: .01rem solid white;
	float: :left;
	text-align: center;
	color: white;
	font-size: .16rem;
	line-height: .33rem;
	background-color: #999999;
}
.container-item-top{
	margin: .1rem;
	border-left: .01rem solid #999999;
	border-bottom: .01rem solid #999999;
}
.order-buttom{
	display:block;
	float: right;
	width: 1rem;
	height: .3rem;
	text-align: center;
	line-height:.3rem;
	color: white;
	background-color: #00B500;
	border-radius: .05rem;
	margin-right: .1rem;
}


</style>
</head>

<body>
	<%@ include file="../common/header.jspf"%>
	<section style="width: 100%; height: .6rem;"></section>

	<section class="shopcar-container">
		<c:forEach items="${orders }" var="order" varStatus="v">
			<div class="container-item" style="font-size: .16rem;color: #999999; padding: .1rem">
			<div class="item-center">
				<p>订单号：${order.id }&nbsp;&nbsp;
					<c:if test="${order.payState==1}">
						<span style="color:red;">(已支付)</span>
					</c:if>
					<c:if test="${order.payState==2}">
						<span style="color:yellow;">(配送中)</span>
					</c:if>
					<c:if test="${order.payState==3}">
						<span style="color:green;">(已完成)</span>
					</c:if>
				</p>
			</div>
				<div class="container-item-top">
					<div class="item-top">
							<div class="product-title" >
								<span>商品名称</span>
							</div>
							<div class="product-title" >
								<span>商品数量</span>
							</div>
							<div class="product-title" style="border-right: .01rem solid #999999;">
								<span>小计</span>
							</div>
					</div>
					<c:forEach items="${order.orderProducts }" var="orderProduct" >
						<div class="item-top">
							<div class="item-top-inner">
								<a href="${ctx }/shopping/product/productInfo?productId=${orderProduct.storeProductId} ">
								<span>${orderProduct.name}</span>
								</a>
							</div>
							<div class="item-top-inner">
								<span>${orderProduct.count}</span>
							</div>
							<div class="item-top-inner">
								<span>${orderProduct.subtotal}</span>
							</div>
						</div>
					</c:forEach>
				</div>
				<div class="item-center" style="height: auto;">
						<p>收货人: ${order.receiver } ${order.phone }</p>
						<p>地址: ${order.province } ${order.city } ${order.area } ${order.address }</p>
				</div>
				<c:if test="${!empty order.storeTicket }">
				<div class="item-center" style="height: auto;">
						<p>发票类型: ${order.storeTicket.typeStr}</p>
						<p>发票抬头类型: ${order.storeTicket.titleTypeStr}</p>
						<p>发票抬头: ${order.storeTicket.title}</p>
				</div>
				</c:if>
				<div class="item-center" style="height: auto;">
						<p>留言：${order.msg}</p>
				</div>
				<div class="item-center">
						<span>总计：</span>
						<span class="price">￥</span><span class="price">${order.total }</span>
						<c:if test="${order.payState==1 }">
						<div class="order-buttom" style="background-color: #999999;">等待发货</div>
						</c:if>
						<c:if test="${order.payState==2 }">
						<a class="order-buttom" href="${ctx }/store/shopping/receiveProduct?orderId=${order.id}">确认收货</a>
						</c:if>
						<c:if test="${order.payState==3 }">
						<a style="float: right;margin-right: .3rem" href="${ctx }/store/shopping/deleteOrder?orderId=${order.id}">
							<i style="font-size: .2rem" class="fa fa-trash-o fa-2x clear"></i> <span>删除</span>
						</a>
						</c:if>
						
				</div>
			</div>
		</c:forEach>
		</form>
		<c:if test="${empty orders}">
			<div class="container-inner" style="display: block">
				<div class="inner-car">
					<img src="${ctx}/statics/store/img/cart_pic.png" />
				</div>
				<p>您还没有订单，赶快去逛逛吧!</p>
				<div class="inner-now">
					<a href="${ctx }/store/shopping/product/showAllProducts.action">马上去逛逛</a>
				</div>
			</div>
		</c:if>
	</section>


	<script src="${ctx }/statics/store/js/resize.js"></script>
	<script src="${ctx }/statics/common/vendor/zepto.min.js"></script>
	<script
		src="${ctx }/statics/common/vendor/swiper/swiper-3.4.0.jquery.min.js"></script>
	<script
		src="${ctx }/statics/common/vendor/swiper/swiper.animate1.0.2.min.js"></script>
	<script src="${ctx }/statics/common/vendor/hammer.min.js"></script>
</body>

</html>
